import { useEffect, useState, useRef } from "react";

function App() {
    const [count, setCount] = useState(0);
    const countRef = useRef(count); //返回的 ref 对象在组件的整个生命周期内持续存在。

    useEffect(() => {
        setTimeout(() => {
            // setCount(count + 1000);
            // setCount(countRef.current + 1000); // count是最开始的值 定时器里面的count 形成了闭包
            // 第二种方案 setCount 传函数，返回值为最新
            // setState : 对象 ， 函数
            // setCount((prevCount) => {
            //     console.log(prevCount);
            //     return prevCount + 1000;
            // });
            // setCount((count) => count + 1000);
        }, 5000);
    }, []);
    // 第一种解决方案 通过useRef的变量解决hooks闭包问题
    useEffect(() => {
        countRef.current = count;
    }, [count]);
    return (
        <div>
            <p>count: {count}</p>
            <button
                onClick={() => {
                    setCount(count + 1);
                }}>
                count + 1
            </button>
        </div>
    );
}
export default App;
